<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.org/ui"
                template="/WEB-INF/template.xhtml">
    
    <ui:define name="head"> 
        <style type="text/css">
            .animated .ui-progressbar-value { 
                background-image: url("#{resource['demo/images/pbar-ani.gif']}"); 
            }
        </style>
        
        <script type="text/javascript">
            //<![CDATA[
function start() {
    PF('startButton1').disable();
    
    window['progress'] = setInterval(function() {
        var pbClient = PF('pbClient'),
        oldValue = pbClient.getValue(),
        newValue = oldValue + 10;
                
        pbClient.setValue(pbClient.getValue() + 10);
    
        if(newValue === 100) {
            clearInterval(window['progress']);
        }
        
        
    }, 1000);
}

function cancel() {
    clearInterval(window['progress']);
    PF('pbClient').setValue(0);
    PF('startButton1').enable();
}
            //]]>
        </script>
    </ui:define>

    <ui:define name="title">
        ProgressBar
    </ui:define>

    <ui:define name="description">
        ProgressBar is a process status indicator that can either work on client side or integrate with server side via ajax.
    </ui:define>

    <ui:param name="documentationLink" value="/components/progressbar" />

    <ui:define name="implementation">
        
        <h:form>   
            <p:growl id="growl" />

            <h3 style="margin-top:0">Client ProgressBar</h3>
            <p:commandButton value="Start" id="start" type="button" onclick="start()" widgetVar="startButton1"/>
            <p:commandButton value="Cancel" id="cancel" type="button" onclick="cancel()" />
            <br /><br />
            <p:progressBar id="progressBarClient" widgetVar="pbClient" style="width:300px"/>

            <h3>Ajax ProgressBar</h3>
            <p:commandButton value="Start" type="button" onclick="PF('pbAjax').start();PF('startButton2').disable();" widgetVar="startButton2" />
            <p:commandButton value="Cancel" action="#{progressBarView.cancel}" oncomplete="PF('pbAjax').cancel();PF('startButton2').enable();" />
            <br /><br />
            <p:progressBar widgetVar="pbAjax" ajax="true" value="#{progressBarView.progress1}" labelTemplate="{value}%" styleClass="animated" global="false">
                <p:ajax event="complete" listener="#{progressBarView.onComplete}" update="growl" oncomplete="PF('startButton2').enable()"/>
            </p:progressBar>

            <h3>Ajax ProgressBar (with long running method)</h3>
            <p:commandButton value="Start" type="button" onclick="PF('pbAjaxLong').start();PF('startButton3').disable();" widgetVar="startButton3" actionListener="#{progressBarView.longRunning}"/>
            <p:commandButton value="Cancel" action="#{progressBarView.cancel}" oncomplete="PF('pbAjaxLong').cancel();PF('startButton3').enable();" />
            <br /><br />
            <p:progressBar widgetVar="pbAjaxLong" ajax="true" value="#{progressBarView.progress2}" labelTemplate="{value}%" styleClass="animated" global="false" interval="500">
                <p:ajax event="complete" listener="#{progressBarView.onComplete}" update="growl" oncomplete="PF('startButton3').enable()"/>
            </p:progressBar>

            <h3>Static Display</h3>
            <p:progressBar value="50" labelTemplate="{value}%" displayOnly="true"/>
            
            <h3>Indeterminate</h3>
            <p:progressBar id="progressBarIndeterminate" style="height:6px" mode="indeterminate"/>
        </h:form>
        
    </ui:define>

</ui:composition>
